<template>
    <div class="app">
        <div class="header">
            <div class="headerbox">
                <div class="avative">
                    <img src="../assets/images/123.jpg" alt="" v-if="isimg">
                    <img :src="img" alt="" v-else>
                    <div style="text-align: center">
                        <el-button type="text" @click="xiugai">修改密码</el-button>
                        <el-button type="text" style="color: gray" @click="exit">退出</el-button>
                    </div>
                </div>
                <div class="namebox">
                    <div class="name">{{userlist.nickname}}</div>
                    <div class="signature">个性签名：</div>
                    <div class="signature signature1">{{userlist.signature}}</div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="left">
                <div @click="change('allDynamic', 0)" :style="n == 0 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-news" style="margin-right: 5px"></i>好友动态
                </div>
                <div @click="change('myDynamic', 1)" :style="n == 1 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-user" style="margin-right: 5px"></i>我的动态
                </div>
                <div @click="change('allActivity', 2)" :style="n == 2 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-news" style="margin-right: 5px"></i>全部活动
                </div>
                <div @click="change('activitys', 8)" :style="n == 8 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-guide" style="margin-right: 5px"></i>推送活动
                </div>
                <div @click="change('myActivity', 3)" :style="n == 3 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-user" style="margin-right: 5px"></i>我参加的
                </div>
                <div v-if="flag" @click="change('audit', 7)" :style="n == 7 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-warning-outline" style="margin-right: 5px"></i>审核参加
                </div>
                <div @click="change('message', 4)" :style="n == 4 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-chat-dot-square" style="margin-right: 5px"></i>留言中心
                </div>
                <div v-if="isflag" @click="change('management', 5)" :style="n == 5 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-suitcase" style="margin-right: 5px"></i>管理中心
                </div>
                <div @click="change('hometown', 9)" :style="n == 9 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-user" style="margin-right: 5px"></i>老乡
                </div>
                <div @click="change('mine', 6)" :style="n == 6 ? 'background-color: #dcf2f5;font-weight: 600;' : ''">
                    <i class="el-icon-edit" style="margin-right: 5px"></i>个人中心
                </div>
            </div>
            <div class="right">
                <transition mode="out-in">
                    <component :is="isComponent"></component>
                </transition>
            </div>
        </div>
<!--        修改密码框-->
        <el-dialog
                title="修改密码"
                :visible.sync="dialogVisible"
                width="20%"
        >
            <div>
                <el-input
                        type="password"
                        placeholder="请输入旧密码"
                        prefix-icon="el-icon-lock"
                        v-model="oldPwd"
                        style="margin-bottom: 20px"
                >
                </el-input>
            </div>
            <div>
                <el-input
                        type="password"
                        placeholder="请输入新密码"
                        prefix-icon="el-icon-lock"
                        v-model="newPwd"
                        style="margin-bottom: 20px"
                >
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="queding">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    import allActivity from './allActivity'
    import allDynamic from './allDynamic'
    import management from './management'
    import message from './message'
    import myActivity from './myActivity'
    import myDynamic from './myDynamic'
    import mine from './mine'
    import audit from './audit'
    import activitys from './activitys'
    import hometown from './hometown'
    import {getuser, changepassword} from '../api/api'
    export default {
        name: "index",
        components:{
            allActivity,
            allDynamic,
            management,
            message,
            myActivity,
            myDynamic,
            mine,
            audit,
            activitys,
            hometown
        },
        data() {
            return {
                isComponent: 'allDynamic',
                n:0,
                userlist:{},
                img:'',
                isimg:true,
                dialogVisible:false,
                oldPwd:'',
                newPwd:'',
                flag:false,
                isflag:false
            }
        },
        methods:{
            //切换组件
            change(data, n) {
                sessionStorage.setItem('isComponent',data)
                sessionStorage.setItem('n',n)
                this.isComponent = sessionStorage.getItem('isComponent')
                this.n = sessionStorage.getItem('n')
            },
            //修改密码
            xiugai(){
                this.dialogVisible = true
            },
            queding(){
                changepassword(this.oldPwd, this.newPwd).then(res=>{
                    if(res.status == 0){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$router.push('/')
                    }
                })
            },
            //退出
            exit(){
                this.$router.push('/')
                sessionStorage.clear()
            }
        },
        created() {
            if(sessionStorage.getItem('isComponent')){
                this.n = sessionStorage.getItem('n')
                this.isComponent = sessionStorage.getItem('isComponent')
            }else {
                this.n = 0
                this.isComponent = 'allDynamic'

            }
            getuser().then(res=>{
                // console.log(res)
                if(res.status == 0){
                    this.userlist = res.data
                    if(res.data.head_img != '123.jpg'){
                        this.isimg = false
                        this.img = res.data.head_img
                    }
                    if(res.data.type == 1){
                        this.flag = true
                    }
                    if(res.data.type != 0){
                        this.isflag = true
                    }
                }
            })
        }
    }
</script>

<style scoped>
    .app {
        background-color: #e9e9e9;
        height: 100%;
        padding-bottom: 400px;
    }
    .header {
        height: 650px;
        background-image: url("https://i.gtimg.cn/qzone/space_item/orig/3/72019_top.jpg");
        background-repeat: no-repeat;
        background-position: center;
    }
    .headerbox {
        padding-top: 150px;
        display: flex;
        min-width: 1000px;
        max-width: 1000px;
        margin: auto;
    }
    .avative {
        width: 120px;
        height: 120px;
        background-color: white;
    }
    .avative>img {
        width: 100%;
        height: 100%;
    }
    .namebox {
        margin-left: 25px;
    }
    .name {
        color: #157c8c;
        font-size: 20px;
    }
    .signature {
        margin-top: 28px;
        font-size: 13px;
    }
    .signature1 {
        margin-left: 28px;
    }
    .section {
        min-width: 1000px;
        max-width: 1000px;
        margin: -300px auto 0px;
        display: flex;
    }
    .left {
        font-size: 13px;
        padding: 5px 0px;
        width: 200px;
        height: 435px;
        overflow: hidden;
        background-color: white;
        border-radius: 10px 10px 10px 10px;
    }
    .left>div {
        padding: 10px 20px;
        margin: 5px 0px;
    }
    .left>div:hover {
        font-weight: 600;
        background-color: #dcf2f5;
    }
    .right {
        margin-left: 25px;
        width: calc(100% - 200px);
        overflow: hidden;
        box-sizing: border-box;
    }
</style>
